<title>进度条</title>

<div class="content-header row">
	 <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
	 	<h3 class="content-header-title mb-0 d-inline-block">进度条</h3>
	 	<div class="row breadcrumbs-top d-inline-block">
	 		<div class="breadcrumb-wrapper mr-1">
	 			<ol class="breadcrumb">
	 				<li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
	 				<li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
	 				<li class="breadcrumb-item active">进度条</li>
	 			</ol>
	 		</div>
	 	</div>
	 </div>
</div>

<div class="content-body">
<section id="progress">
	<div class="row">
		<!-- Basic Progress start -->
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Basic Progress</h4>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
						<div class="progress">
							<div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="10" aria-valuemax="100" style="width:10%"></div>
						</div>
						<div class="progress">
							<div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="20" aria-valuemin="20" aria-valuemax="100" style="width:20%"></div>
						</div>
						<div class="progress">
							<div class="progress-bar bg-success" role="progressbar" aria-valuenow="30" aria-valuemin="30" aria-valuemax="100" style="width:30%"></div>
						</div>
						<div class="progress">
							<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="40" aria-valuemin="40" aria-valuemax="100" style="width:40%"></div>
						</div>
						<div class="progress">
							<div class="progress-bar bg-info" role="progressbar" aria-valuenow="50" aria-valuemin="50" aria-valuemax="100" style="width:50%"></div>
						</div>
						<div class="progress">
							<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="60" aria-valuemax="100" style="width:60%"></div>
						</div>
						<div class="progress">
							<div class="progress-bar bg-light" role="progressbar" aria-valuenow="80" aria-valuemin="80" aria-valuemax="100" style="width:80%"></div>
						</div>
						<div class="progress">
							<div class="progress-bar bg-dark" role="progressbar" aria-valuenow="90" aria-valuemin="90" aria-valuemax="100" style="width:90%"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Basic Progress end -->

		<!-- Labeled Progress start -->
		<div class="col-xl-6 col-lg-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Labeled Progress</h4>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="progress">
							<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="20" aria-valuemax="100" style="width:20%">20%</div>
						</div>
						<div class="progress">
							<div class="progress-bar bg-success" role="progressbar" aria-valuenow="40" aria-valuemin="40" aria-valuemax="100" style="width:40%">40%</div>
						</div>
						<div class="progress">
							<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="60" aria-valuemax="100" style="width:60%">60%</div>
						</div>
						<div class="progress">
							<div class="progress-bar bg-info" role="progressbar" aria-valuenow="80" aria-valuemin="80" aria-valuemax="100" style="width:80%">80%</div>
						</div>
						<div class="progress">
							<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="100" aria-valuemin="100" aria-valuemax="100" style="width:100%">100%</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Labeled Progress end -->

		<!-- Progress Height start -->
		<div class="col-xl-6 col-lg-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Progress Height</h4>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<p>Different height sizes using inline styles. For Default progress, No size class needed.</p>
						<div class="progress" style="height: 18px;">
							<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="20" aria-valuemax="100"
							 style="width:20%;"></div>
						</div>
						<div class="progress" style="height: 14px;">
							<div class="progress-bar bg-success" role="progressbar" aria-valuenow="40" aria-valuemin="40" aria-valuemax="100"
							 style="width:40%;"></div>
						</div>
						<div class="progress" style="height: 10px;">
							<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="60" aria-valuemax="100"
							 style="width:60%;"></div>
						</div>
						<div class="progress" style="height: 7px;">
							<div class="progress-bar bg-info" role="progressbar" aria-valuenow="80" aria-valuemin="80" aria-valuemax="100"
							 style="width:80%;"></div>
						</div>
						<div class="progress" style="height: 3px;">
							<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="100" aria-valuemin="100" aria-valuemax="100"
							 style="width:100%;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Progress Height end -->

		<!-- Striped start -->
		<div class="col-xl-6 col-lg-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Striped</h4>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<p>Uses a gradient to create a striped effect.</p>
						<div class="progress">
							<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="20" aria-valuemax="100"
							 style="width:20%"></div>
						</div>
						<div class="progress">
							<div class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-valuenow="40" aria-valuemin="40" aria-valuemax="100"
							 style="width:40%"></div>
						</div>
						<div class="progress">
							<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="60" aria-valuemax="100"
							 style="width:60%"></div>
						</div>
						<div class="progress">
							<div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-valuenow="80" aria-valuemin="80" aria-valuemax="100"
							 style="width:80%"></div>
						</div>
						<div class="progress">
							<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" aria-valuenow="100" aria-valuemin="100" aria-valuemax="100"
							 style="width:100%"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Striped end -->

		<!-- Animated Stripes start -->
		<div class="col-xl-6 col-lg-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Animated Stripes</h4>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Progressbar with animated effect.</p>
						<div class="progress">
							<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="20" aria-valuemin="20"
							 aria-valuemax="100" style="width:20%"></div>
						</div>
						<div class="progress">
							<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="40" aria-valuemin="40"
							 aria-valuemax="100" style="width:40%"></div>
						</div>
						<div class="progress">
							<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="60"
							 aria-valuemax="100" style="width:60%"></div>
						</div>
						<div class="progress">
							<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="80" aria-valuemin="80"
							 aria-valuemax="100" style="width:80%"></div>
						</div>
						<div class="progress">
							<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="100" aria-valuemin="100"
							 aria-valuemax="100" style="width:100%"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Animated Stripes end -->
	</div>
</section>


<!-- Multiple bars start -->
<section id="Multiple-progress-bars">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Multiple bars</h4>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<div class="progress">
							<div class="progress-bar" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
							<div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
						</div>
						<div class="progress">
							<div class="progress-bar" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
							<div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
							<div class="progress-bar bg-info" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
						</div>
						<div class="progress">
							<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
							<div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
							<div class="progress-bar bg-info" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
							<div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
						</div>
						<div class="progress">
							<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
							<div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
							<div class="progress-bar bg-info" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
							<div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
							<div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
						</div>
						<div class="progress">
							<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
							<div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
							<div class="progress-bar bg-info" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
							<div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
							<div class="progress-bar bg-warning" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
							<div class="progress-bar bg-secondary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Multiple bars end -->
</div>

<script type="text/javascript">

</script>